<!-- jsp指令：page/taglib/include -->
<%@ page language="java" pageEncoding="utf-8"%>
<!-- 引入标签库：JSTL-c标签 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="asserts/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<!-- header -->
		<div class="header navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand"  href="#">
						易书博客后台管理系统
					</a>
				</div>
				
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="javascript:logout()"><span class="glyphicon glyphicon-log-out">&nbsp;</span>安全退出</a>
					</li>
				</ul>
				
				<form class="navbar-form navbar-right" role="search">
				  <div class="form-group">
					<input type="text" class="form-control" placeholder="关键字">
				  </div>
				  <button type="submit" class="btn btn-default">
					  <span class="glyphicon glyphicon-search"></span>
				  </button>
				</form>		
								
			</div>
		</div>
		<!-- header end -->
		
		<div class="body">
			<!-- 侧边栏 -->
			<div class="left">
				<!-- 用户信息 -->
				<div class="user-info">
					<div class="info-icon">
						<img src="${user.hicon}" width="80px" height="80px" class="img-circle" alt="">
					</div>
					<div class="info-name">${user.nickname}</div> 
				</div>
				<!-- 菜单 -->
				<div class="list-group text-center">
					<a href="main.jsp" class="list-group-item"><i class="fa fa-dashboard"></i> 仪表盘</a>
					<a href="banner.jsp" class="list-group-item"><i class="fa fa-file-image-o"></i> 轮播管理</a>
					<a href="article?method=findAll" class="list-group-item"><i class="fa fa-file-text-o"></i> 博客管理</a>
					<a href="category?method=findAll" class="list-group-item  active"><i class="fa fa-bars"></i> 类别管理</a>
					<a href="tag?method=findAll" class="list-group-item"><i class="fa fa-tags"></i> 标签管理</a>
					<a href="comment.jsp" class="list-group-item"><i class="fa fa-comment"></i> 留言管理</a>
					<a href="link?method=findAll" class="list-group-item"><i class="fa fa-chain"></i> 友情链接</a>
					<a href="ad.jsp" class="list-group-item"><i class="fa fa-rmb"></i> 广告管理</a>
					<a href="settings.jsp" class="list-group-item"><i class="fa fa-gear"></i> 个人设置</a>
				</div>
				<div class="copy">Design by MRChai &copy; 软帝集团 版权所有</div>
			</div>
			
			<!-- 内容展示区 -->
			<div class="right">
					<!-- 	导航 -->
					<ol class="breadcrumb">
						<li><i class="fa fa-bars"></i> 分类管理</li>
					</ol>
					<div class="container-fluid">
						<!-- 	内容面板 -->
						<form action="category" id="formDel">
						<!-- 隐藏域传值 -->
						<input type="hidden" name="method" value="del" />
						<div class="panel panel-default">
							<!-- 控制按钮 -->
							<div class="panel-heading">
								<button class="btn btn-primary" type="button" data-target="#addCateModal" data-toggle="modal"><i class="fa fa-plus"></i> 分类添加</button>
								<button class="btn btn-danger" id="delBtn" type="button"><i class="fa fa-trash"></i> 批量删除</button>
							</div><!-- 控制按钮  end-->
							<div class="panel-body">
								<table class="table table-bordered table-striped">
									<tr>
										<th width="10%"><input type="checkbox" name="" id="selectAll" /></th>
										<th width="10%">序号</th>
										<th width="20%">分类名</th>
										<th width="30%">描述</th>
										<th width="10%">排序</th>
										<th width="20%">操作</th>
									</tr>
									<!-- 	数据绑定 -->
									<c:forEach items="${page.data}" var="c" varStatus="stat">
									<tr>
										<td><input type="checkbox" name="ids" value="${c.id}" class="eid"  id="" /></td>
										<td>${(page.pageNow-1)*page.pageSize + stat.count}</td>
										<td>${c.cname}</td>
										<td>${c.summary}</td>
										<td>${c.sort}</td>
										<td>
											<a href="javascript:void(0)" class="upd" data-toggle="modal" data-target="#updCateModal"><i class="fa fa-edit"></i> 修改</a>
											&nbsp;&nbsp;
											<a href="javascript:del(${c.id})"><i class="fa fa-trash"></i> 删除</a>
										</td>
									</tr>
									</c:forEach>
									<!-- 	数据绑定 end -->
								</table>
								<!-- 	分页 -->
								<div class="text-right">
									<ul class="pagination" style="margin:0">
										<li><a href="category?method=findAll&cp=${page.pre}" title="上一页"><span class="fa fa-angle-left"></span></a></li>
										<c:forEach begin="1" end="${page.totalPage}" var="i">
											<c:choose>
												<c:when test="${page.pageNow == i}">
													<li class="active"><a href="#">${i}</a></li>
												</c:when>
												<c:otherwise>
													<li><a href="category?method=findAll&cp=${i}">${i}</a></li>
												</c:otherwise>
											</c:choose>
										</c:forEach>		
										<li><a href="category?method=findAll&cp=${page.next}" title="下一页"><span class="fa fa-angle-right"></span></a></li>
									</ul>
								</div><!-- 	分页 end-->
							</div>
						</div><!-- 	内容面板 end -->
						</form>
					</div>
			</div><!-- 	内容展示区 end-->
		</div>
		
		<!-- 弹层组件 添加分类 -->
		<div class="modal fade"  id="addCateModal" role="dialog" aria-labelledby="mylabel">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action="category">
						<input type="hidden" name="method" value="add" />
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">分类添加</h4>
						</div>
						<div class="modal-body">
							<input type="text" class="form-control" id="cname" name="cname"  placeholder="请输入分类名"/>
							<br />
							<textarea class="form-control" id="desc" name="desc" rows="5" placeholder="请输入分类描述"></textarea>
						</div>
						<div class="modal-footer">
							<button class="btn btn-primary" type="submit">添加</button>
							<button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 添加分类 end -->
		
		
		<!-- 弹层组件 修改分类 -->
		<div class="modal fade"  id="updCateModal" role="dialog" aria-labelledby="mylabel">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action="category">
						<input type="hidden" name="method" value="update" />
						<input type="hidden" name="cid" id="_cid"/>
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">分类修改</h4>
						</div>
						<div class="modal-body">
							<input type="text" class="form-control" id="_cname" name="cname"  placeholder="请输入分类名"/>
							<br />
							<textarea class="form-control" id="_desc" name="desc" rows="5" placeholder="请输入分类描述"></textarea>
						</div>
						<div class="modal-footer">
							<button class="btn btn-primary" type="submit">修改</button>
							<button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 修改分类 end -->
		
		<!-- 		js插件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="asserts/layer/layer.js"></script>
		<script src="asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="js/comm.js"></script>
		
		<script>
			//jQuery框架 
			$(function(){
				//显示消息
				if('${model.msg}'){
					layer.msg('${model.msg}');
				}
				
				//选中批量删除按钮，并且为其绑定点击事件
				$('#delBtn').on('click',function(){
					//获取所有被勾选的复选框对象
					var eids = $('.eid:checked');
					if(eids.length < 1){
						layer.msg('请至少选中一项!');
						return;
					}
					layer.confirm('确认删除这'+eids.length+'条数据?',{
						btn:['确认','取消'],
						icon:3
					},function(){
						//提交表单
						$('#formDel').submit();
					})
				})
				
				//为所有修改链接绑定事件
				$('.upd').on('click',function(){
					var tr = $(this).parent().parent();
					var td0 = tr.find('td')[0].querySelector('.eid').value;
					var td1 = tr.find('td')[2].innerText;
					var td2 = tr.find('td')[3].innerText;
					$('#_cid').val(td0);
					$('#_cname').val(td1);
					$('#_desc').val(td2);
				})
			})	
			
			//根据id删除
			function del(id){
				layer.confirm('是否确定删除该分类?',{
					btn:['确认','取消'],
					icon:3
				},function(){
					location.href='category?method=del&ids='+id;
				})
			}
			
		</script>
	</body>
</html>
